<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
</head>
<body>
    <ul id="myList">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>      
    </ul>
<script>
// 点击li   显示 你点击了第几个li即item
// 一次性给所有li 注册事件？
const lis = document.querySelectorAll('ul#myList li');
// 不可以给nodeList 一次性声明
// lis.addEventListener('click',function(event){
//     console.log(event.target,'////')
// },false)
// es6 新的循环 for of 循环 不使用技术循环 (let i = 0;i <lis.length;i++)
// 机械，可读性差，
// 该循环不需要用i 
// for (let item of lis){ // 更语义化   循环的是数组的元素 而不是数组的索引
//     // 向浏览器 event loop 注册了一堆事件 监听器？
//     // 如果li多了 性能会很差
//     // 没有必要
//     item.addEventListener('click',function(event){
//         console.log(event.target.innerText);
//     },false)
// }
// event.target 目标阶段 事件发生在的元素，而不是事件监听的元素
// 事件委托  利用冒泡机制 委托给父元素
document.getElementById('myList').addEventListener('click',function(event){
    console.log(event.target.innerText);
},false)
</script>
</body>
</html>